<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        text-align: center;
    }
    #addProjectTable{
        margin:30px auto;
        width:100%;
        height:100%;
    }
</style>
<link rel="stylesheet" href="../lib/layui-v2.1.6/layui/css/layui.css">
<body>
<table class="layui-form" id="addProjectTable">
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">项目名称</label>
            <div class="layui-input-inline">
                <input name="projectName" lay-verify="required" class="layui-input" placeholder="输入治疗项目名称">
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">项目类型</label>
            <div class="layui-input-inline">
                <input name="category" disabled="disabled"  class="layui-input" value="治疗项目">
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">治疗价格/次</label>
            <div class="layui-input-inline">
                <input name="unitPrice" class="layui-input" lay-verify="number" placeholder="单次治疗价格">
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">支出比例<br>(医生)</label>
            <div class="layui-input-inline">
                <input name="doctorCost" class="layui-input" lay-verify="number|ratio" placeholder="比例范围(0-100)">
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">支出比例<br>(门诊)</label>
            <div class="layui-input-inline">
                <input name="clinicCost" class="layui-input" lay-verify="number|ratio" placeholder="比例范围(0-100)">
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">支出比例<br>(执行者)</label>
            <div class="layui-input-inline">
                <input name="excutorCost" class="layui-input" lay-verify="number|ratio" placeholder="比例范围(0-100)">
            </div>
        </td>
    </tr>
    <tr>
        <td class="layui-input-inline">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="0">启用</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" lay-submit lay-filter="*" id="submit" style="display:none">
        </td>
    </tr>
</table>
</body>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui-v2.1.6/layui/layui.js"></script>
<script>
    var isSuccess=0;
    layui.use(['form'],function () {
        var form=layui.form;
        var $=layui.jquery;
        resize();
        form.verify({       //表单验证
            ratio:function (value,item) {     //value表单的值，item表单的DOM对象
                if(parseFloat(value)<0 || parseFloat(value)>100){
                    return "格式错误！比例范围(0-100)";
                }
            }
        });
        form.on('submit(*)',function () {       //新增按钮监听
            var projectName=$('input[name="projectName"]').val();
            var category=$('input[name="category"]').val();
            var unitPrice=$('input[name="unitPrice"]').val();
            var doctorCost=$('input[name="doctorCost"]').val();
            var clinicCost=$('input[name="clinicCost"]').val();
            var excutorCost=$('input[name="excutorCost"]').val();
            var status=$('select[name="status"]').find("option:selected").val();
            var addProjectData={
                'projectName':projectName,
                'category':category,
                'unitPrice':unitPrice,
                'doctorCost':doctorCost,
                'clinicCost':clinicCost,
                'excutorCost':excutorCost,
                'status':status
            }
            console.log(JSON.stringify(addProjectData));
            <!--
            $.ajax({
                data:addProjectData,
                type:"POST",
                url:'',
                success:function (result) {
                    if(result.code==200){
                        isSuccess=200;
                    }
                }
            })
            -->
        });
        form.render();
    })

    function resize(){
        var bodyHeight=parent.$('#iframeHeight').val()*0.7;
        var bodyWidth=parent.$('#iframeWidth').val()*0.96;
        $('body').css({'height':bodyHeight,'width':bodyWidth});
        var iconSize=$(document.body).width()*0.05;
        $('.icon').css({'font-size':iconSize});
    }
    function addProjectSubmit(){
        $('#submit').click();
        return isSuccess;
    }
</script>
</html>